<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card manage applicatio_back">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_header applica">
        <!-- 返回 -->
        <div class="back " @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>新增二级子类</h1>
      </div>

      <!-- 新增子类 -->
      <div class="present addzilei">新增子类</div>
      <!-- 表单 -->
      <el-form :label-position="labelPosition" size="18px" label-width="100px" :model="erjizilei">
        <el-form-item class="labelSize" label="分类名称:">
          <el-input v-model="erjizilei.name"></el-input>
        </el-form-item>
        <el-form-item label="二级子类:">
          <el-input v-model="erjizilei.region"></el-input>
        </el-form-item>
        <el-form-item label="序号:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="图标:">
          <!-- 上传图片 -->
          <el-upload
            class="upload-demo"
            :on-success="handleSuccess"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
          >
            <div class="upload_btn">
              <i></i>
              <span>选择图片</span>
            </div>
          </el-upload>
          <div class="upload_none" v-if="photoLength==0">未选择图片</div>
          <div class="upload_none" v-else>已选择图片</div>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <el-button class="save">保存</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      text: "应用",
      erjizilei: {
        name: "",
        region: "",
        type: ""
      },
      // 上传图片的长度
      photoLength: 0
    };
  },
  methods: {
    backClick() {
      this.$router.go(-1);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 上传成功之后
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList.length);
      this.photoLength = fileList.length;
    },
    // 上传失败
    handleErr(err, file, fileList) {
      console.log(err);
    }
  }
};
</script>

<style scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.applica {
  margin: 28px 0 28px 50px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage .el-card__header {
  padding: 0;
}
.present {
  margin-left: 66px;
}
.addzilei {
  font-size: 20px;
}
.el-input {
  width: 139px;
  height: 36px;
}
.el-form {
  margin: 20px 60px 62px;
}
label {
  font-size: 18px !important;
}
.el-form-item__label {
  padding: 0;
}
.upload_btn {
  background-color: #fff;
  width: 139px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.upload_btn i {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  background: url(../assets/img/photo.png) no-repeat;
  background-size: 28px 20px;
  margin: 0;
}
.upload_btn span {
  font-size: 16px;
  color: #757575;
  /* line-height: 47px; */
}
.upload_none {
  display: inline;
  margin-left: 10px;
}
.upload-demo {
  float: left;
}
.save {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  font-size: 24px;
  margin-left: 60px;
  color: #ffffff;
}
.manage h1 {
  padding: 0;
}
#app {
  text-align: center;
}
</style>
